나만의 첫 화면 만들기

TST010의 HTML·JS를 연결해 입력 이벤트와 화면 데이터를 직접 확인합니다.

QCN

학습 목표

HandStack 프레임워크를 사용하여 새로운 웹 화면을 직접 만들어봅니다.
HTML 파일과 JavaScript 파일을 생성하고, 두 파일이 어떻게 상호작용하여 동적인 화면을 만드는지 이해합니다.

  • TST010.html 파일 생성 및 기본 구조 작성
  • TST010.js 파일 생성 및 화면 로직 작성
  • 브라우저에서 직접 만든 화면을 확인하고 테스트
QCN

모듈 화면 파일 위치

wwwroot는 웹 서버를 통해 직접 접근할 수 있는 파일들이 위치하는 디렉토리입니다.

경로: $(HANDSTACK_SRC)/2.Modules/[모듈 ID]/wwwroot/[모듈 ID]/view/[업무 ID]

  • 이 경로 안에 TST010.html과 TST010.js 두 개의 파일을 생성합니다.

http://localhost:8421/[모듈 ID]/view/TST/TST010.html

QCN

공통 화면 파일 위치 (1/2)

공통 화면 파일은 정해진 경로에 만들어야 합니다.

모듈경로: $(HANDSTACK_SRC)/2.Modules/[모듈 ID]/Contracts/wwwroot/[앱 ID]

다음과 같이 화면에 대한 개발 소스를 단일 디렉토리내에 저장합니다.

%HANDSTACK_HOME%\contracts
└─wwwroot
   └─HDS
       └─TST
           └─TST010.html
           └─TST010.js
QCN

공통 화면 파일 위치 (2/2)

http://localhost:8421/view/TST/TST010.html

QCN

HTML 요소에 적용 가능한 syn-* 속성 3개

  • syn-datafield: 서버와의 요청/응답에 매칭되는 ID
  • syn-events: 사용자의 클릭, 입력과 같은 이벤트
  • syn-options: 사용자 입력에 대응하는 UI 컨트롤의 모양과 기능 설정
QCN

HTML 요소 ID는 헝그리안 표기법을 사용 (1/3)

syn-* 속성 선언을 하면 HTML 요소를 고유하게 식별할 수 있는 id 속성은 반드시 선언해야 합니다.

QCN

HTML 요소 ID는 헝그리안 표기법을 사용 (2/3)

btn: BUTTON
txt: INPUT [type]
  hdn: hidden
  txt: text
  pin: password
  clr: color
  eml: email
  num: number
  txt: search
  tel: tel
  url: url
  smt: submit
  rst: reset
  btn: button
QCN

HTML 요소 ID는 헝그리안 표기법을 사용 (3/3)

  rdo: radio
  chk: checkbox
txt: TEXTAREA
ddl: SELECT (multiple)
grd: SYN_GRID
cht: SYN_CHART
chp: SYN_CODEPICKER
clp: SYN_COLORPICKER
dtp: SYN_DATEPICKER
edt: SYN_EDITOR
etc: ETC...
QCN

syn-datafield 속성 (1/3)

서버와의 거래 요청 및 응답이 필요한 사용자 입력에 대응하는 HTML 태그(이하 UI 컨트롤)에 선언됩니다.

QCN

syn-datafield 속성 (2/3)

BUTTON
INPUT [type]
    hidden
    text
    password
    button
    radio
    checkbox
    ...
TEXTAREA
SELECT (multiple)
SYN_GRID
SYN_CHART
SYN_CODEPICKER
QCN

syn-datafield 속성 (3/3)

SYN_COLORPICKER
SYN_DATEPICKER
SYN_EDITOR
ETC...
QCN

syn-options 속성 (1/3)

컨트롤별 옵션과 대소문자를 확인합니다. 아래 예제는 syn-options가 해석하는 객체 리터럴 표기이며 엄격한 JSON과 구분합니다.

$(HANDSTACK_SRC)/2.Modules/wwwroot/wwwroot/uicontrols/**.js

QCN

syn-options 속성 (2/3)

<input id="txtEmailID" syn-datafield="EmailID" syn-options="{editType: 'text', belongID: ['LD01']}">
<select class="form-select" id="ddlProjectRole" syn-datafield="ProjectRole" syn-options="{toSynControl: false,
belongID: ['LD01']}">
    <option value="" selected="">전체</option>
</select>

<input id="txtMemberName" syn-datafield="MemberName" syn-options="{editType: 'text', belongID: ['LD01']}">
<syn_datepicker id="dtpCreatedStartAt" syn-datafield="CreatedStartAt" syn-options="{value: 'month:-6',
useRangeSelect: true,
rangeEndControlID: 'dtpCreatedEndAt',
QCN

syn-options 속성 (3/3)

belongID: ['LD01']}"></syn_datepicker>
<syn_datepicker id="dtpCreatedEndAt" syn-datafield="CreatedEndAt" syn-options="{value: 'now',
useRangeSelect: true,
rangeStartControlID: 'dtpCreatedStartAt',
belongID: ['LD01']}"></syn_datepicker>
QCN

HTML 파일 생성 (TST010.html) (1/2)

먼저, 웹 페이지의 뼈대가 되는 HTML 파일을 만듭니다. syn.loader.js 파일은 HandStack의 클라이언트 리소스를 로드하는 핵심 스크립트입니다.

QCN

HTML 파일 생성 (TST010.html) (2/2)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="visibility: hidden;">
    <form autocomplete="off" id="form1" syn-datafield="MainForm">
        <!-- 화면 요소들이 여기에 추가됩니다 -->
    </form>
    <script src="/js/syn.loader.js"></script>
</body>
</html>
QCN

JavaScript 파일 생성 (TST010.js) (1/3)

다음으로, 화면의 동작과 데이터를 관리하는 동일한 이름의 JavaScript 파일과 $ 접두어를 사용하는 객체를 만듭니다.

QCN

JavaScript 파일 생성 (TST010.js) (2/3)

'use strict';
let $TST010 = {
    // 공통 기능 상속 선언 (지금은 비워둡니다)
    extends: [],
    // 화면 구성에 필요한 환경설정 (지금은 비워둡니다)
    config: {},
    // 화면 내에서 사용할 전역 변수 선언
    prop: {
        custom1: '블라블라',
        custom2: 12345,
        custom3: ['hello', 'world']
    },
    // 사용자 이벤트 핸들러 선언
    event: {},
QCN

JavaScript 파일 생성 (TST010.js) (3/3)

    // 기능 메서드 선언
    method: {}
};
QCN

JavaScript 구조 살펴보기 (1/2)

$TST010 객체 안의 각 속성은 명확한 역할을 가집니다.

  • extends: 다른 화면의 공통 기능을 상속받아 재사용할 때 사용합니다.

  • config: 화면 초기화 시 필요한 설정을 정의합니다.

  • prop: 이 화면에서만 사용할 변수를 선언합니다. custom1, custom2 처럼 다양한 타입의 데이터를 저장할 수 있습니다.

  • event: 사용자의 클릭, 입력과 같은 동작에 반응하는 함수를 정의합니다.

QCN

JavaScript 구조 살펴보기 (2/2)

  • hook: 의도된 공통 업무 동작에 반응하는 함수를 정의합니다.

  • method: 화면에서 재 사용될 수 있는 기능들을 함수로 만들어 정의합니다.

  • transaction: 화면에서 호출 가능한 거래들을 정의합니다.

QCN

이벤트 핸들러 추가하기 (1/2)

사용자 인터랙션을 처리하기 위해 event 객체에 실제 함수를 추가해 봅시다.

  • 함수 이름은 [HTML요소ID]_[이벤트명] 규칙을 따릅니다.

  • $this는 현재 화면 객체($TST010)를 가리킵니다.

QCN

이벤트 핸들러 추가하기 (2/2)

// ... (prop 부분 아래)
event: {
    txtApplicationID_click(evt) {
        // prop에 선언된 변수 사용
        console.log($this.prop.custom1);
    },
    txtApplicationName_focus(evt) {
        console.log($this.prop.custom2.toString());
    },
    txtApplicationName_change(evt) {
        console.log($this.prop.custom3.toString());
    }
},
// ...
QCN

주요 이벤트 카테고리

  • 마우스 이벤트:
    click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove,mouseenter, mouseleave
  • 키보드 이벤트:
    keydown, keyup, keypress
  • 폼 이벤트:
    focus, blur ,change, input ,submit, reset
  • 기타 자주 사용되는 이벤트:
    load, resize, scroll, touchstart, touchend, touchmove (모바일)
QCN

HTML 요소와 이벤트 연결하기

JavaScript에 정의한 이벤트 핸들러를 HTML 요소와 연결해야 합니다.
syn-events 속성을 사용합니다.

<form id="form1" syn-datafield="MainForm">
    - Application ID:
    <input type="text" id="txtApplicationID" syn-events="['click']">
    - Application Name:
    <input type="text" id="txtApplicationName" syn-events="['focus','change']">
</form>
QCN

Javascript에서 다음과 같이 이벤트 핸들러를 연결하기

syn.$l.addEvent(window, 'resize', () => {
});

syn.$l.addEvent(document.body, 'click', () => {
});

syn.$l.addEvent('btnDynamicEvent', 'click', $this.event.btnDynamicEvent_click);

표준 이벤트 명에 대해 다음을 참고하세요. HTML Event Attributes

QCN

현재 화면 객체를 참조하는 $this 키워드 (1/3)

  • this 키워드는 실행 컨텍스트에 따라 다른 객체를 참조하는 특별한 키워드
QCN

현재 화면 객체를 참조하는 $this 키워드 (2/3)

  • this는 호출 방식에 따라 참조 대상이 달라집니다.
    • 객체 메서드에서의 this
    • 일반 함수에서의 this
    • 생성자 함수에서의 this
    • 이벤트 핸들러에서의 this
QCN

현재 화면 객체를 참조하는 $this 키워드 (3/3)

  • 프레임워크에서 정의한 변수로 $this === $TST010 의미를 사용
syn.$l.addEvent('btnDynamicEvent', 'click', $this.event.btnDynamicEvent_click);
QCN

잠깐, 구분해 보기

클릭해도 로그가 없다면 어느 이름들을 맞춰 봐야 할까요?

QCN

핸즈온: 직접 확인해보기 (1/2)

이제 모든 준비가 끝났습니다. 브라우저에서 다음의 조건을 충족하는 직접 만든 화면을 만들어봅시다.

  1. HandStack 프로젝트를 실행합니다.

  2. 브라우저를 열고 http://localhost:8421/view/TST/TST010.html로 접속합니다.

  3. 브라우저의 개발자 도구(F12)를 열고 Console 탭을 선택합니다.

  4. Application ID 입력란을 클릭해 보세요. 콘솔에 '블라블라'가 출력됩니다.

QCN

핸즈온: 직접 확인해보기 (2/2)

  1. Application Name 입력란에 포커스를 맞추고, 내용을 수정한 뒤 포커스를 잃게 해보세요. 콘솔에 12345와 hello,world가 차례로 출력될 것입니다.
QCN

첫 화면의 완료 기준

  • HTML·JS 이름과 화면 객체 $TST010이 일치합니다.
  • click·focus·change마다 예상한 로그가 나옵니다.
  • $this.prop 값 하나를 바꿔 결과 변화를 설명합니다.
QCN

발표: 첫 화면의 목표를 말한 뒤 핵심 개념과 예제로 진행합니다. 확인 질문 뒤에는 답할 시간을 주고, 마지막 완료 기준을 남겨 질문을 받습니다. 발표 구성 참고: MIT OpenCourseWare, Patrick Winston, How to Speak (2018), https://ocw.mit.edu/courses/res-tll-005-how-to-speak-january-iap-2018/pages/how-to-speak/

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

질문 후 잠시 기다립니다. 답이 없으면 앞에서 본 예제를 다시 가리킵니다. 확인할 답: HTML id, syn-events, event의 요소ID_이벤트명과 JS 로딩 여부를 확인합니다. 다음 주제로 넘어가기 전에 차이를 청중의 표현으로 한 번 확인합니다.

질문을 받는 동안 이 확인 기준을 화면에 남깁니다. 청중이 자신의 업무에 적용할 다음 행동 하나를 고르게 합니다.